<template>
  <div class="chat-wrap">
    <div class="chat-wrap__main">
      <div class="chat-wrap__main-content">
        <ClientChat @send="onSendQuestion" />
      </div>
      <div class="chat-wrap__main-footer">
        <QuestionInput @send="onSendQuestion" />
      </div>
    </div>
  </div>
</template>

<script>
import "./utils/sse";
import "./utils/ClientData";
import ClientChat from "@/components/client-chat";
import QuestionInput from "@/components/question-input";
import { MESSAGE_TYPE, ACCESS_TYPE } from "@/constants";

export default {
  name: "ChatDemo",
  components: {
    ClientChat,
    QuestionInput,
  },
  data() {
    return {
      chatMainMrgBottom: 140,
    };
  },
  mounted() {
    // 初始化数据
    if (ACCESS_TYPE === "ws") {
      this.$clientData.init();
    } else {
      this.$SseCls.init();
    }
  },
  created() {
    // 监听用户端ws事件
    this.listenClientEvent();
  },
  methods: {
    // 监听用户端ws事件
    listenClientEvent() {
      // 监听配置信息，获取机器人和问答库可用状态
      this.$eventHub.$on("client_configChange", (res) => {
        this.isAvailable = res.is_available; // 机器人与问答库是否可用，不可用则页面展示”维护中“状态
      });
      // 监听历史记录拉取成功事件
      this.$eventHub.$on("client_msgContentChange", (res) => {
        const { chatsContent, type } = res;
        if (type === MESSAGE_TYPE.ANSWER && chatsContent.length > 0) {
          // 主动推送记录数目录数 > 0，则隐藏欢迎页，进入绘会话页，并展示拉取的历史记录
          this.isWeclome = false;
        }
        if (type === MESSAGE_TYPE.HISTORY && chatsContent.length > 0) {
          // 历史记录数 > 0，则隐藏欢迎页，进入绘会话页，并展示拉取的历史记录
          this.isWeclome = false;
        }
      });
    },
    // 发送问题上行消息
    onSendQuestion(question) {
      if (ACCESS_TYPE === "ws") {
        this.$clientData.triggerSendMsg(question);
      } else {
        this.$SseCls.sseSendMsg(question);
      }
    },
  },
};
</script>

<style lang="less">
.chat-wrap {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #ffffff;
  font-size: 28rpx;
  background-image: url("../assets/bg-c2.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;

  &__main {
    display: flex;
    flex-direction: column;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    border-radius: 12px;

    &-chat-content {
      height: calc(100% - 80px);
      display: flex;
      justify-content: flex-end;
      align-items: flex-end;
    }

    &-content {
      height: calc(100% - 80px);
      display: flex;
      justify-content: flex-end;
      align-items: flex-end;
    }
    &-footer {
      position: relative;
      z-index: 3;
    }
  }
}
</style>
